<script setup lang="ts">
import { ref } from 'vue';
import { jump, router, toast } from '@/utils/tools'
import { onShow } from '@dcloudio/uni-app';
import { apiAddressDel, apiAddressEdit, apiAddressList } from '@/apis/address';
import noneBox from '@/components/noneBox/noneBox.vue';
import config from '@/config/index.js';
import { computed } from 'vue';


const addressLists = ref([]);
// 是否默认
const isDefault = ref(false);

const handleTrash = (id: number) => {
    // toast('已删除');
    apiAddressDel({ id }).then((res: any) => {
        if (res.code == 200) {
            toast('删除成功！');
            getList();
        }
    });
}
const handleEdit = (row: any) => {
    // toast('已修改');
    router(`/pagesMy/address/add?id=${row.id}&sence=edit`);
}

const handleDefault = (row: any) => {
    apiAddressEdit({
        id: row.id,
        state: !row.state ? 1 : 0,
    }).then((res: any) => {
        if (res.code == 200) {
            toast('设置默认地址成功！');
            getList();
        }
    });
    // toast('已修改');
    // isDefault.value = !isDefault.value;


}
const handleAdd = () => {
    toast('点击了添加按钮');
    jump({ url: '/pagesMy/address/add', method: 'navigateTo' });
    // radio.value = !radio.value;
}
// 获取列表
const getList = async () => {
    let lists = await apiAddressList();
    addressLists.value = lists.data;
}
// const iconEmpty = computed(() => {
//     return config.empty;
// })
onShow(() => {
    getList();
})


</script>
<template>
    <view class="container">
        <view v-for="(item, i) in addressLists" :key="item.id">
            <view class="l-card">
                <view class="flex flex-center">
                    <view class="coord margin-right-20 flex flex-center ">
                        <image src="@/static/images/coord.png" mode="scaleToFill" />
                    </view>
                    <view class="flex flex-column " style="width: 100%;">
                        <view class="realname flex flex-between">
                            <view><text>姓名:</text>
                                <text>{{ item.recipient }}</text>
                            </view>
                            <view class="tag-warning flex flex-center">
                                <text>{{ item.bq }}</text>
                            </view>
                        </view>
                        <view class="mobile">
                            <text>电话:</text>
                            <text>{{ item.phone }}</text>
                        </view>
                        <view class="address">
                            <text>地址:</text>
                            <text>{{ item.area + item.address }}</text>
                        </view>
                    </view>
                </view>
                <uv-line :customStyle="{ margin: '10rpx 0' }"></uv-line>
                <view class="flex flex-between ">
                    <view class="default flex flex-align-center">
                        <label class="radio" @click="handleDefault(item)">
                            <radio value="r1" style="transform:scale(0.7)" :checked="item.state == 1 ? true : false" /> 默认地址
                        </label>
                    </view>
                    <view class="flex operate flex-align-center">
                        <view class="flex flex-align-center margin-right-20" @click="handleTrash(item.id)">
                            <image src="@/static/images/trash.png" class="margin-right-10" mode="scaleToFill" />
                            <text>删除</text>
                        </view>
                        <view class="flex flex-align-center" @click="handleEdit(item)">
                            <image src="@/static/images/edit.png" class="margin-right-10" mode="scaleToFill" />
                            <text>编辑</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
    <view class="btn-view flex flex-center" @click="handleAdd">
        <view class="flex flex-center">
            <image src="@/static/images/loupe.png" class="margin-right-10" mode="scaleToFill" />
            <button class="btn-text">
                添加收货地址
            </button>
        </view>
    </view>
    <noneBox v-if="addressLists.length <= 0"></noneBox>

    <!-- <uv-empty :icon="iconEmpty" :show="true"></uv-empty> -->
</template>
<style scoped lang="scss">
.l-card {
    // position: relative;
    margin-bottom: 20rpx;
}

.container {
    padding-bottom: 150rpx;
}

.btn-view {
    position: fixed;
    bottom: 0;
    background-color: #FF3F3F;
    width: 100%;
    height: 120rpx;

    .btn-text {
        color: #ffffff;
        font-size: 28rpx;

    }


    image {

        width: 36rpx;
        height: 36rpx;
    }
}

.coord {
    flex-shrink: 0;
    background: linear-gradient(0deg, rgba(191, 1, 3, 1), rgba(255, 84, 2, 1));
    border-radius: 40rpx;
    width: 80rpx;
    height: 80rpx;

    image {
        width: 50rpx;
        height: 50rpx;
    }
}

.tag-warning {
    width: 104rpx;
    background: #E7F7FF;
    border: 1px solid #91D5FF;
    border-radius: 10rpx;

    text {
        font-size: 28rpx;
        color: #2E9AFF;
    }
}

.line {
    margin: 20rpx 0;
}

.operate {
    color: #6C6C6C;
    font-size: 28rpx;

    image {
        width: 28rpx;
        height: 28rpx;
    }

}


.default {}

.tag-primary {
    width: 104rpx;
    background: #FFF2E8;
    border: 1px solid #ffbb96;
    border-radius: 10rpx;

    text {
        color: #FA561F;
    }
}


.address {
    // text-indent: -2em;
    // padding-left: 2em;
    // line-height: 1.5;
}
</style>
